<template>
  <div style="background-image: url(../../static/img/bg_4.jpg);height: 720px;">
    <div class="login_box">
      <el-row>
        <el-col span="3" :offset="3" id="str">
          用户名：
        </el-col>
        <el-col span="12">
          <el-input v-model="account.accountName" placeholder="请输入内容" ></el-input>
        </el-col>
      </el-row>
      <br />

      <el-row>
        <el-col span="3" :offset="3" id="str">
          密码：
        </el-col>
        <el-col span="12">
          <el-input v-model="account.password" placeholder="请输入内容" show-password></el-input>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col span="3" :offset="3" id="str">
          电话：
        </el-col>
        <el-col span="12">
          <el-input v-model="account.accountPhone" placeholder="请输入内容" ></el-input>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col span="3" :offset="3" id="str">
          短信验证码：
        </el-col>
        <el-col span="12">
          <el-input v-model="account.code" placeholder="请输入内容" class="code"></el-input>
           <el-button type="primary" @click="sendcode()" id="login-getCode">获取验证码</el-button>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col span="3" :offset="3" id="str">
          邮箱：
        </el-col>
        <el-col span="12">
          <el-input v-model="account.accountEmail" placeholder="请输入内容" ></el-input>
        </el-col>
      </el-row>
      <br />
      <el-button type="primary" @click="register()" class="register-re">注册</el-button>
    </div>
  </div>

</template>

<script>
  export default{
      name:"register",
      data(){
      	return{
          account:{
            accountName:"",
            password:"",
            accountPhone:"",
            accountEmail:"",
            code:""
          }
      	}
      },
      methods:{
      	register(){
          var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;//邮箱验证
          if (this.account.accountName!=null && this.account.accountName!="") {
            if (this.account.password!=null && this.account.password!="") {
              if (this.account.accountEmail!=null && this.account.accountEmail!="") {
                 if(reg.test(this.account.accountEmail)){
                    if (this.account.accountPhone!=null && this.account.accountPhone!="") {
                      if((/^1[3|4|5|7|8]\d{9}$/.test(this.account.accountPhone))){
                        if (this.account.code!=null && this.account.code!="") {
                          this.$http.post("/account/register",this.account).then(resp=>{
                          	// console.log(resp)
                          	if (resp.data.code==200) {
                          		alert("注册成功");
                          		this.$router.push("/login");//跳转到登录页面
                          	} else{
                          		alert("登录失败:"+resp.data.message)
                          		location.reload()
                          	}
                          })
                        } else{
                          alert("验证码不能为空")
                        }
                      }else{
                        alert("手机格式有误")
                      }

                    } else{
                      alert("电话不能为空")
                    }
                 }else{
                   alert("邮箱格式有误")
                 }
              } else{
                alert("邮箱不能为空")
              }
            } else{
              alert("密码不能为空")
            }
          } else{
            alert("用户名不能为空")
          }
      	},
        sendcode(){
          if(this.account.accountPhone!=null && this.account.accountPhone!=""){
            this.$http.get("/account/sendCode",{
              params:{
                phone:this.account.accountPhone
              }
            }).then(resp=>{
              if(resp.data.code==200){
                alert("验证码已发送，请注意接收")
              }
            })
          }else{
           alert("手机号不能为空")
         }
        }
      }
    }
</script>

<style>
  #str{
    line-height: 40px;
  }
  .login_box{
   margin-top: 40px;
   position: relative;
   top: 163px;
   width: 75%;
   margin: 0 auto;
   /* height: 600px; */
  }
  .register-re{
    position: absolute;
    left: 515px;
    top: 371px;
  }
  #login-getCode{
    position: absolute;
    left: 752px;
  }
  .code{
    position: relative;
    float: right;
  }
</style>
